<%--
  Created by IntelliJ IDEA.
  author: Jsonor
  date: 2018/4/24 16:43
  description: Description
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>


<%--<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>vue实现的购物车商品累加结算功能代码</title>

  <link href="/static/css/demo.css" rel="stylesheet" media="all" />

  <!--[if IE]>

  <style type="text/css">
    li.remove_frame a {
      padding-top: 5px;
      background-position: 0px -3px;
    }
  </style>

  <![endif]-->

  <script type="text/javascript" src="/static/js/jquery.min.js"></script>
  <script type="text/javascript" src="/static/js/jquery.qrcode.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      function fixHeight() {
        var headerHeight = $("#switcher").height();
        $("#iframe").attr("height", $(window).height()-54+ "px");
      }
      $(window).resize(function () {
        fixHeight();
      }).resize();

      $('.icon-monitor').addClass('active');

      $(".icon-mobile-3").click(function () {
        $("#by").css("overflow-y", "auto");
        $('#iframe-wrap').removeClass().addClass('mobile-width-3');
        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
        $(this).addClass('active');
        return false;
      });

      $(".icon-mobile-2").click(function () {
        $("#by").css("overflow-y", "auto");
        $('#iframe-wrap').removeClass().addClass('mobile-width-2');
        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
        $(this).addClass('active');
        return false;
      });

      $(".icon-mobile-1").click(function () {
        $("#by").css("overflow-y", "auto");
        $('#iframe-wrap').removeClass().addClass('mobile-width');
        $('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
        $(this).addClass('active');
        return false;
      });

      $(".icon-tablet").click(function () {
        $("#by").css("overflow-y", "auto");
        $('#iframe-wrap').removeClass().addClass('tablet-width');
        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
        $(this).addClass('active');
        return false;
      });

      $(".icon-monitor").click(function () {
        $("#by").css("overflow-y", "hidden");
        $('#iframe-wrap').removeClass().addClass('full-width');
        $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
        $(this).addClass('active');
        return false;
      });
    });
  </script>

  <script type="text/javascript">
    function Responsive($a) {
      if ($a == true) $("#Device").css("opacity", "100");
      if ($a == false) $("#Device").css("opacity", "0");
      $('#iframe-wrap').removeClass().addClass('full-width');
      $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
      $(this).addClass('active');
      return false;
    };
  </script>

</head>
<body id="by">
&lt;%&ndash;
<div id="switcher">
  <div class="center">
    <ul>
      <div id="Device">
        <li class="device-monitor"><a href="javascript:"><div class="icon-monitor"></div></a></li>
        <li class="device-mobile"><a href="javascript:"><div class="icon-tablet"></div></a></li>
        <li class="device-mobile"><a href="javascript:"><div class="icon-mobile-1"></div></a></li>
        <li class="device-mobile-2"><a href="javascript:"><div class="icon-mobile-2"></div></a></li>
        <li class="device-mobile-3"><a href="javascript:"><div class="icon-mobile-3"></div></a></li>
      </div>
      <li class="top2">
        <a href="#">手机二维码预览</a>
        <div class="vm">
          <div id="output"></div>
          <p style="color:#808080;margin:10px 0 0 0;">扫一扫，直接在手机上打开</p>
        </div>
      </li>
      <li class="logoTop">
        <a href="http://www.17sucai.com/pins/26730.html">vue实现的购物车商品累加结算功能代码</a>            <script type="text/javascript">
        jQuery('#output').qrcode({width:150,height: 150,text: window.location.href});
      </script>
      <li class="remove_frame"><a href="http://www.17sucai.com/preview/606045/2017-10-28/shopCart/index.html" title="移除框架"></a></li>
    </ul>
  </div>
</div>&ndash;%&gt;

<div id="iframe-wrap">
  <iframe id="iframe" src="http://www.17sucai.com/preview/606045/2017-10-28/shopCart/index.html" frameborder="0"  width="100%"></iframe>
</div>

<!--百度流量统计代码-->
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?382f81c966395258f239157654081890";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>

</body>
</html>--%>


<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
  <title>购物车</title>
  <!--css类引用-->
  <link rel="stylesheet" href="js/layui/css/layui.css" />
  <link rel="stylesheet" href="js/eleme-ui/index.css" />
  <link rel="stylesheet" href="css/ShoppingCart.css" />
</head>
<body>

<!--主要内容-->
<div class="row " id="myVue" v-cloak>
  <div class="col-lg-10 col-lg-offset-1" >
    <div class="layui-form">
      <table class="ShopCartTable layui-table">
        <thead>
        <tr>
          <th class="selectLeft">
            <template>
              <el-checkbox  @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox>
            </template>
            <span class="selectLeftGoods">商品或服务名称</span>
          </th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(tabledatas,index) in shopTableDatas">
          <td  class="selectLeft">
            <template>
              <el-checkbox @change="checkedRadioBtn(tabledatas)" v-model="tabledatas.checked"></el-checkbox>
            </template>
            <span class="goodName">
										<img class="goodImg" :src="tabledatas.src" />
									</span>
            <span class="goodName goodsName">
										<h2 class="goodname" v-text="tabledatas.name"></h2>
										<p class="goodGary">
											<span>供应商：</span>
											<span v-text="tabledatas.supplier"></span>
										</p>
										<p class="goodGary">
											<span>发货地：</span>
											<span v-text="tabledatas.ConPlace"></span>
										</p>
									</span>
          </td>
          <td class="danPrice">{{tabledatas.price | moneyFiler}}</td>
          <td>
            <i @click="goodNum(tabledatas,-1)" class="fa  deleteBtn" aria-hidden="true">-</i>
            <input v-model="tabledatas.num" type="text" class="form-control numInput" aria-label="...">
            <i @click="goodNum(tabledatas,1)" class="fa  addBtn" aria-hidden="true">+</i>
          </td>
          <td>
            <p class="totalPrice">{{tabledatas.price*tabledatas.num | moneyFiler}}</p>
          </td>
          <td class="gongneng">
            <p class="deletegoods" @click="alertRadio(index)">删除</p>
            <p @click="alertmovesSavegoods(index)">移到我的收藏</p>
            <template v-if="tabledatas.saveandremove">
              <p @click="tabledatas.saveandremove = false">加入收藏</p>
            </template>
            <template v-else>
              <p :class="{'saveCheck':!tabledatas.saveandremove}" @click="tabledatas.saveandremove = true">取消收藏</p>
            </template>
          </td>
        </tr>
        </tbody>
      </table>
      <div class="row tablefooter">
        <template>
          <el-checkbox style="padding-left:16px" @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox>
        </template>
        <span class="removeMuch" @click="alertMuch">删除选中的商品或服务</span>
        <span class="removeSaves" @click="alertMuchgoods">移到我的收藏</span>
        <span class="servicenum">已选择<span class="goodsNum">{{goodsNum}}</span>件商品<span class="goodsNum">{{serviceNum}}</span>项服务</span>
        <span class="totalclassPoin">总价：<span class="totalMoneyClass">{{totalMoney | moneyFiler}}</span></span>
        <span @click="saveData" class="SettlementBtn">去结算</span>
      </div>
    </div>
  </div>
</div>
<!--js类引用-->
<script type="text/javascript" src="js/vue/vue.min.js" ></script>
<script type="text/javascript" src="js/eleme-ui/index.js" ></script>
<script type="text/javascript" src="js/ShoppingCart.js" ></script>
</body>

</html>

